<template>
    <div ref="chart" style="width: 1200px; height: 500px;"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  import axios from 'axios';
  
  export default {
    data() {
      return {
        chartData: [],
      };
    },
    mounted() {
      this.fetchData();
    },
    methods: {
      async fetchData() {
        try {
          const response = await axios.get('http://localhost:8081/house/elevator');
          this.chartData = response.data;
          this.renderChart();
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
      renderChart() {
        const chart = echarts.init(this.$refs.chart);
        const xAxisData = this.chartData.map(item => item.elevator);
        const seriesData = this.chartData.map(item => item.count);
  
        const option = {
          title: {
            text: '电梯情况统计',
            left: 'center',
            textStyle: {  
                fontSize: 22, // 设置标题文字大小  
            },
          },
          tooltip: {
            textStyle: {  
                fontSize: 14, // 设置 tooltip 文字大小  
            }},
          xAxis: {
            type: 'category',
            data: xAxisData,
            axisLabel: {  
                fontSize: 20, // 设置 x 轴标签的文字大小  
            },
          },
          yAxis: { 
            axisLabel: {  
                fontSize: 20, // 设置 y轴标签的文字大小  
            }},
          series: [{
            name: '数量',
            type: 'bar',
            data: seriesData,
          }],
        };
  
        chart.setOption(option);
      },
    },
  };
  </script>
  